{extend name="common/common" /}

{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-list"></i></span>
		{$Header|default='物流配送体系建设情况汇总'}
	</div>
	<div class="el-card-content">
		<div class="seaForm">
			<el-form :inline="true" class="search-table-form">
				<el-form-item>
					<el-select v-model="seaForm.depart_id" placeholder="请选择地区">
						{volist name="DepartOpt" id="v"}
						<el-option label="{$v.name}" value="{$v.id}"></el-option>
						{/volist}
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker v-model="seaForm.s_time" :type="pickerType"
						value-format="timestamp" placeholder="开始时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-date-picker v-model="seaForm.e_time" :type="pickerType"
						value-format="timestamp" placeholder="结束时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="info" plain @click="getTable">查询</el-button>
					<el-button type="primary" plain @click="exportExcel">导出</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div id="el-table-box">
			<el-table :data="table.tableData" stripe="true" border show-summary>
				<el-table-column align="center" prop="id" label="序号" width="80"></el-table-column>
				<el-table-column align="center" prop="depart_name"
					label="示范地区">
				</el-table-column>
				<el-table-column align="center" prop="receive_num"
					label="收件数量（件）">
				</el-table-column>
				<el-table-column align="center" prop="send_num"
					label="发件数量（件）">
				</el-table-column>
				<el-table-column align="center" prop="is_combine" width="340"
					label="对县城到村物流资源进行整合的示范县数量（个）">
				</el-table-column>
				<el-table-column align="center" prop="county_num"
					label="县级物流配送中心数量（个）">
				</el-table-column>
				<el-table-column align="center" prop="town_num"
					label="乡镇快递网点数量（个）">
				</el-table-column>
				<el-table-column align="center" prop="country_num" width="100"
					label="其他（个）">
				</el-table-column>
			</el-table>
		</div>
		<div class="table-page">
			<el-pagination
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="seaForm.pageNumber"
				:page-sizes="[10, 20, 50, 75]"
				:page-size="seaForm.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="table.tableTotal">
			</el-pagination>
		</div>
	</div>
{/block}

{block name="script"}
<script type="text/javascript" src="__JS__/plugins/elementui/vue-table-export/Blob.js"></script>
<script type="text/javascript" src="__JS__/plugins/elementui/vue-table-export/FileSaver.js"></script>
<script type="text/javascript" src="__JS__/plugins/elementui/vue-table-export/shim.min.js"></script>
<script type="text/javascript" src="__JS__/plugins/elementui/vue-table-export/xlsx.full.min.js"></script>
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		pickerType:"{$PickerType|default='date'}",
		seaForm:{
			depart_id:"",s_time:"",e_time:"",pageSize:10,pageNumber:1,
		},
		table:{
			tableData:"",
			tableTotal:0,
		}
	},
	mounted:function () {
		this.getTable();
	},
	methods:{
		getTable() {
			var param = this.seaForm;
			var url = '{:url("Statistics/logistics_system_bulid")}';
			$.post(url,param,function(res) {
				main.loading=false;
				if(res.code == 1){
					main.$message({message:res.msg,type:'success'});
					main.table.tableData = res.data.rows;
					main.table.tableTotal = res.data.total;
				}else{
					main.$notify.error({title:'失败',message:res.msg});
				}
			});
		},
		pageSizeChange(val) {
			this.seaForm.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.seaForm.pageNumber = val;
			this.getTable();
		},
		exportExcel (type) {
			var sheetName = "物流配送体系建设情况汇总";
			var FileName = "物流配送体系建设情况汇总";
			FileName += ".xlsx";
			var table = document.getElementById('el-table-box');
			var wb = XLSX.utils.table_to_book(table, {sheet: sheetName});
			XLSX.writeFile(wb,FileName);
	 	},
	}
})
</script>
{/block}
